<template>
  <!-- <section class="btn-wrap"> -->
  <!-- {{ actions }} -->
  <div class="average-link">
    <span v-for="(action, index) in fixedActions"
          :key="index"
          :class="{ 'son-span': index === 0 || index === 3 }">
      <el-button type="text"
                 :class="{
            'first-span': index === 1,
            'border-right': moreActions.length === 0
          }"
                 @click="handleClick(action)">{{ action.title }}</el-button>
    </span>
    <el-dropdown v-if="moreActions.length > 0"
                 class="down-pointer">
      <span class="el-dropdown-link">
        <icon-svg class-name="iconClass"
                  icon-name="gengduo" />
      </span>
      <el-dropdown-menu slot="dropdown">
        <!-- <template v-for="(action, index) in moreActions"> -->
        <el-dropdown-item v-for="(action, index) in moreActions"
                          :key="index"
                          @click.native="handleClick(action)">{{ action.title }}</el-dropdown-item>
        <!-- </template> -->
      </el-dropdown-menu>
    </el-dropdown>
  </div>
  <!-- </section> -->
</template>

<script>
export default {
  name: "TableExecutor",
  props: {
    data: {
      type: Object
    },
    name: {
      type: String
    },
    actions: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  computed: {
    // hidden () {
    //   return (action) => {
    //     let hidden = eval(action.hidden);
    //     if (hidden instanceof Function) {
    //       return hidden(this.data);
    //     } else {
    //       return hidden;
    //     }
    //   };
    // },
    display () {
      let filterActions = this.actions.filter((x) => x.title);
      let displayActive = filterActions.map((_x) => {
        let hidden = eval(_x.hidden);
        if (hidden instanceof Function) {
          let hiddenData = hidden(this.data);
          if (!hiddenData || hiddenData < 0) return _x;
        } else {
          return _x;
        }
      });
      return displayActive.filter((_o) => _o != undefined);
    },
    fixedActions () {
      return this.display?.slice(0, 2);
    },
    moreActions () {
      return this.display?.slice(2);
    }
  },
  mounted () { },
  methods: {
    handleClick ({ fulfill, ...action }) {
      this.$emit("action", { ...action, data: this.data });
      if (fulfill instanceof Function) {
        fulfill(this.data);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.btn-wrap {
  // text-align: center;
  .son-span {
    padding: 0 6px;
  }
}
.more {
  // font-size: 12px;
  padding: 0 6px;
}
.average-link {
  display: flex;
  justify-content: center;
  align-items: center;
}
.first-span {
  border-left: 1px solid var(--prev-border-color-grey);
  border-right: 1px solid var(--prev-border-color-grey);
  padding: 0 6px;
  border-radius: 0px;
}
.iconClass {
  height: 13px;
  padding: 0 7px;
}
.el-dropdown {
  cursor: pointer;
}
.border-right {
  border-right: 0px;
}
</style>
